<template>
<div>
  <h2>登录</h2>

  <t-tabs :value="currentValue" :list="list" @change="changeTab"></t-tabs>
  <!--        账号登录-->
  <div v-if="currentValue==1">
    <div>
      <t-input label="手机号" v-model="user.phone"  placeholder="请输入手机号"></t-input>
    </div>
    <div>
      <t-input label="密码" v-model="user.password" type="password" placeholder="   请输入密码"></t-input>
    </div>
    <div style="margin-top: 20px">
      <t-button size="large" theme="light" @click="login" block>登录</t-button>
    </div>
  </div>
  <!--短信登录-->
  <div v-else>
    <div>
      <t-input label="手机号" v-model="userCode.phone" placeholder="   请输入手机号">
        <template #suffix>
          <div class="suffix">
            <div class="suffix--line"></div>
            <label style="color: #747bff" @click="sendCode">发送验证码</label>
          </div>
        </template>
      </t-input>
    </div>
    <div>
      <t-input label="验证码" v-model="userCode.code"  placeholder="   请输入验证码"></t-input>
    </div>
    <div style="margin-top: 20px">
      <t-button size="large" theme="light" @click="loginCode" block>登录</t-button>
    </div>
  </div>

  <div style="margin-top: 20px;">
    <div style="float: left">
      <router-link style="color: grey;font-size: 12px;" to="/register">注册账号</router-link>
    </div>
    <div style="float: right">
      <router-link style="color: grey;font-size: 12px;" to="/find">忘记密码</router-link>
    </div>
  </div>
</div>
</template>

<script setup>
import { ref } from 'vue';
import {useRouter} from "vue-router";
import {get,post} from "../util/Request.js";
import {Toast} from "tdesign-mobile-vue";

//属性 定义
const currentValue = ref('1');
const router=useRouter()
const list = [
  {
    value: '1',
    label: '账号登录'
  },
  {
    value: '2',
    label: '短信登录'
  }
];
//属性 账号登录 对象
const user=ref({
  phone:"",
  password:""
})
// 属性 短信登录 对象
const userCode=ref({
  phone:"",
  code:""
})
//函数 定义
const changeTab=(val)=>{
  //切换
  currentValue.value = val;
}
const sendCode=()=>{
  //发送验证 请求接口
  get("/user/sendlcode?phone="+userCode.value.phone).then(r=>{
    if(r.code==0){
      console.log(r.data)
      Toast("发送成功，请查阅手机")
    }else{
      Toast(r.data)
    }
  })
}
const login=()=>{
  //账号登录 请求接口
  post("/user/login",user.value).then(r=>{
    if(r.code==0){
      //登录成功 存储令牌和用户信息
      //localStorage.setItem 存储字符串
      localStorage.setItem("token",r.data.token);
      localStorage.setItem("user",JSON.stringify(r.data.user))
      //跳转到 首页
      router.push("/layout")
    }else{
      Toast(r.data)
    }
  })
}
const loginCode=()=>{
  //短信登录 请求接口
  //账号登录 请求接口
  post("/user/login",userCode.value).then(r=>{
    if(r.code==0){
      //登录成功 存储令牌和用户信息
      //localStorage.setItem 存储字符串
      localStorage.setItem("token",r.data.token);
      localStorage.setItem("user",JSON.stringify(r.data.user))
      //跳转到 首页
      router.push("/main")
    }else{
      Toast(r.data)
    }
  })
}
</script>

<style scoped>

</style>